<template>
	/*  #ifdef  MP-WEIXIN  */
	<NavBar :title="'momo笔记'" />
	/*  #endif  */
	<view class="section-box">
		<view class="top-content">
			<image class="logo" src="/static/login.png"></image>
			<view class="welcome">
				{{props.textContent.welcome}}
			</view>
		</view>
		<view class="content">
			<view class="input-text">
				<up-input 
					type="number" 
					:placeholder="props.textContent.placeHolderText.fText"
					v-model="props.userFormData.phone" 
					clearable 
					shape="circle" 
				/>
			</view>
			<view class="input-text">
				<up-input :placeholder="props.textContent.placeHolderText.sText" v-model="props.userFormData.password"
					placeholderClass="placeholder" :password="isShowEye" shape="circle">
					<template #suffix>
						<up-icon :name="!isShowEye ? 'eye-fill' : 'eye-off'" @click="changeShowEyeStatus" size="28"></up-icon>
					</template>
				</up-input>
			</view>
			<button class="btn" @click="btnClick">{{props.textContent.btnText}}</button>
			<view class="btn-text" @click="textClick">{{props.textContent.text}}</view>
		</view>
		<view class="login_bottom" v-if="props.textContent.placeHolderText.isShowCode">
			<up-checkbox-group v-model="checkedAgree" @change="checkboxChange">
				<up-checkbox :customStyle="{marginBottom: '8px'}" label="登录代表同意《用户协议》与《隐私协议》" name="agree">
				</up-checkbox>
			</up-checkbox-group>
		</view>
	</view>
	<up-modal :show="modelShow" @confirm="confirm" showCancelButton @cancel="cancel" title="提示" :content='content'>
	</up-modal>
</template>

<script setup lang="ts">
	import {
		ref,
	} from 'vue';
	import NavBar from './NavBar.vue'
	const props = defineProps(['textContent', 'userFormData'])
	const emit = defineEmits(['btnEvent', 'textEvent', 'getCode'])
	// 同意请求
	const checkedAgree = ref(false)
	const checkboxChange = () => {
		checkedAgree.value = !checkedAgree.value
	}
	const modelShow = ref(false) //模态框切换
	let content = ref('') //模态框文字
	const confirm = () => { //确认
		modelShow.value = false
	}
	const cancel = () => { //取消
		modelShow.value = false
	}

	const btnClick = () => {
		emit('btnEvent', {
			checkedAgree,
			modelShow,
			content
		})
	}
	const textClick = () => {
		emit('textEvent')
	}
	const isShowEye = ref(true)
	// 修改图标样式
	const changeShowEyeStatus = () => {
		isShowEye.value = !isShowEye.value
	}

	const getCodeMethod = () => {
		emit('getCode')
	}
</script>

<style scoped lang="scss">
	.section-box {
		width: 85%;
		margin-left: 56rpx;

		.top-content {
			margin-top: 80rpx;

			.logo {
				width: 128rpx;
				height: 128rpx;
			}

			.welcome {
				margin-top: 40rpx;
				font-size: 48rpx;
			}
		}

		.content {
			margin-top: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.input-text {
				width: 100%;
				margin-top: 40rpx;
			}

			.btn {
				margin-top: 100rpx;
				width: 80%;
				height: 80rpx;
				background-color: #fe5469;
				color: white;
				text-align: center;
				line-height: 80rpx;
				border-radius: 50rpx;
				font-size: 35rpx;
			}

			.btn-text {
				margin-top: 20rpx;
				color: #FB7685;
				font-size: 28rpx;
			}
		}

		.login_bottom {
			position: absolute;
			bottom: 100rpx;
			transform: translate(10%);
		}
	}
</style>